<template>
    <div class="zj">
        <div class="top"><span style="font-weight: 600;">{{ props.item.name + '.' + props.item.hz }}</span>
            <div> <el-popconfirm @confirm="confirm" width="250" title="确定删除此文件？(删除后不可恢复)">
                    <template #reference>
                        <el-button style="margin:0px 10px" type="danger">删除</el-button>
                    </template>
                </el-popconfirm><el-button @click="operation"
                    :loading="props.chash == props.item.hash ? props.loading : false"
                    :type="per === 100 ? 'primary' : 'danger'">
                    {{ per === 100 ? '下载' : '继续' }}
                </el-button></div>
        </div>
        <div class="progress">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="per" />
        </div>
        <div class="s" v-html="svg(props.item.hz)"></div>
    </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue"
import { svg } from "../utils/svg"
import { sFetch } from "../utils/request";
const emit = defineEmits(['update:upload', 'update:fresh', "update:loading"])
const loading = ref(false)
defineExpose({ loading })
const props = withDefaults(defineProps<{
    item: {
        hash: string
        name: string
        cindex: number
        hz: string
        max: number
        url: string
    },
    db: any,
    chash: string,
    loading: boolean
}>(), {
})
const per = computed(() => {
    return Number((parseFloat((props.item.cindex / props.item.max).toFixed(2)) * 100).toFixed(2))
})
const confirm = async () => {

    let res = await sFetch(
        `${import.meta.env.VITE_URL}removeDir`,
        "post",
        {
            hash: props.item.hash,
            name: props.item.name,
            hz: props.item.hz
        }
    );
    if (res.code === 200) {
        ElMessage.success(res.msg)
        emit('update:fresh')
    } else {
        ElMessage.error(res.msg)
    }

}
const getByKey = (hash: string) => {
    return new Promise<any>((resolve, reject) => {
        var transaction = props.db.transaction(['fileBase64']);
        var objectStore = transaction.objectStore('fileBase64');
        var index = objectStore.index('hash');
        var req = index.get(hash);
        req.onsuccess = function (e: any) {
            var result = e.target.result;
            if (result) {
                resolve(result)
            } else {
                resolve(null)
                console.log('无此数据')
            }
        }
        req.onerror = (err: any) => {
            reject(err)
        }
    })
}
const operation = async () => {
    if (per.value == 100) {
        const url = props
            .item.url;
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${props.item.name}.${props.item.hz}`);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    } else {
        emit('update:loading', { flag: true, hash: props.item.hash })
        let res = await getByKey(props.item.hash)
        if (!res) {
            let delRes = await sFetch(
                `${import.meta.env.VITE_URL}removeFile`,
                "post",
                {
                    hash: props.item.hash,
                }
            );
            if (delRes.code === 200) {
                ElMessage.success("此文件已损坏，删除文件成功")
                emit('update:fresh')
            } else {
                ElMessage.error("此文件已损坏，删除文件失败")
            }

            return ElMessage.error("此文件已损坏，请重新上传")
        } else {
            emit('update:upload', {
                hash: props.item.hash,
                name: props.item.name
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.zj {
    position: relative;
    margin: 30px 0;

    .top {
        width: calc(100% - 100px);
        margin-bottom: 20px;
        font-size: 16px;
        align-items: center;
        display: flex;
        justify-content: space-between;

    }

    .progress {
        width: calc(100% - 100px);
    }

    .s {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 10px;
        right: 20px;
    }
}
</style>